import React, { useEffect, useState } from 'react'
import { Button, Checkbox, Form, Input } from 'antd';
import { DownOutlined,UpOutlined } from '@ant-design/icons';

type Props = {
    getSeaData:any
    resetting:any
}

const ChargeSearch = (props: Props) => {
    const [isIdCard,setIsIdCard] = useState(false)
    const [isWidth,setIsWidth] = useState('20%')
    const [isTitle,setIsTitle] = useState('展开')

    useEffect(()=>{
    },[])

    const onFinish = (values: any) => {
        console.log('Success:', values);
        props.getSeaData(values)
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    //控制展开收缩
    const domBtn = () =>{
        if(isIdCard){
            setIsIdCard(false)
            setIsWidth('20%')
            setIsTitle('展开')
        }else{
            setIsIdCard(true)
            setIsWidth('30%')
            setIsTitle('收缩')
        }
    }

    //重置
    const  resetBtn =() => {
        props.resetting()
    }

    return (
        <div>
            <Form
                name="basic"
                style={{display:'flex',flexWrap:'wrap',justifyContent:'space-between',margin:'0 50px'}}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >

                <Form.Item
                    label="商铺名称"
                    name="shopName"
                    style={{width:isWidth}}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="手机号"
                    name="tel"
                    style={{width:isWidth}}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="负责人姓名"
                    name="managerName"
                    style={{width:isWidth}}
                >
                    <Input />
                </Form.Item>

                {
                    isIdCard ? <Form.Item
                    label="身份证号"
                    name="idCard"
                    style={{width:'30%'}}
                >
                    <Input />
                </Form.Item>:null
                }
                

                <Form.Item style={{width:'220px'}}>
                    <Button type="primary" htmlType="submit" style={{marginRight:'10px'}}>
                        查询
                    </Button>
                    <Button htmlType="button" style={{marginRight:'20px'}} onClick={resetBtn}>
                        重置
                    </Button>
                    <a href="#" onClick={domBtn}>{isIdCard? <UpOutlined/>:<DownOutlined/>}   {isTitle}</a>
                </Form.Item>
            </Form>
        </div>
    )
}

export default ChargeSearch